<!--
 * @Author: 张颖星 yingxing.zhang@trustway.cn
 * @Date: 2023-10-24 17:09:04
 * @LastEditors: 张颖星 yingxing.zhang@trustway.cn
 * @LastEditTime: 2024-03-01 16:14:48
 * @FilePath: \physiotherapysystem-web\src\components\Topbar\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { useTagsStore } from '@/stores/tag.js';
import { closeTag } from '@/utils/globalWay';
const router = useRouter();
const route = useRoute();
let tagsStore  = useTagsStore();

const props = defineProps({
    tabName:{
        default:"",
        type:String
    },
    //需要返回路由路径或者路由名称
    backValue:{
        default:"",
        type:String
    }
})
const routeLabel = ref("");
const findCurrentLabel = ()=>{
    if(tagsStore.tags && tagsStore.tags.length>0){
        let tags = tagsStore.tags;
        let currentTags = tags.find(value=>{
            return value.name == route.name
        })
        routeLabel.value = currentTags?.label || '';
    }

}
onMounted(()=>{
    findCurrentLabel();
})
const backHandle = ()=>{
    if((props.backValue??'') !== ''){
        let  routerInfo = router.resolve(props.backValue);
        router.replace(routerInfo.fullPath)
    }else{
        router.back();
    }
    //关闭标签页
    closeTag();
}
defineExpose({
    backHandle
})
</script>
<template>
    <div class="top-bar">
        <div class="left-info">
            <img src="@/assets/images/left-jt.png" alt="" class="img" @click="backHandle()">
            <span class="link" @click="backHandle()">{{ tabName || routeLabel }}</span>
        </div>
        <div class="right-info">
            <slot name="operate">

            </slot>
        </div>
    </div>    
</template>
<style lang="less" scoped>
.top-bar{
    position: sticky;
    top: 0;
    background: #fff;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-bottom:1px solid #dde;
    padding:8px 12px;
    z-index: 999;
    .left-info{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        span{
            color:#000000;
            font-weight: bold;
            font-size:16px;
            margin-left:8px;
            cursor: pointer;
        }
        .img{
            cursor: pointer;
            width: 16px;
            height: 16px;
            position: relative;
            top:1px;
        }
    }
    .right-info{
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
}
</style>